<template>
	<view class="">
		<view class="list">
			<button @click="handleEvent1">显示消息提示框</button>
			<button @click="handleEvent2">隐藏消息提示框</button>
			<button @click="handleEvent3">显示加载提示</button>
			<button @click="handleEvent4">隐藏加载提示</button>
			<button @click="handleEvent5">设置返回拦截提示</button>
			<button @click="handleEvent6">取消返回拦截提示</button>
			<button @click="handleEvent7">显示模态对话框</button>
			<button @click="handleEvent8">弹出选项弹框</button>
		</view>
	</view>
</template>

<script>
	
	export default {
		enablePullDownRefresh:true,
		data() {
			return {
				
			}
		},
		onPullDownRefresh () {
		    // wx.stopPullDownRefresh()/
			// wx.startPullDownRefresh()
		},
		methods: {
			handleEvent1(){
				wx.showToast({
					title: '成功',
					icon: 'success',// success、error、loading、none
					// image: '', // 自定义图标的本地路径，image 的优先级高于 icon
					duration: 2000, //是否显示透明蒙层，防止触摸穿透
					mask: false
				})
			},
			handleEvent2(){
				wx.hideToast({
					// noConflict:true //目前 toast 和 loading 相关接口可以相互混用，此参数可用于取消混用特性
				})
			},
			
			handleEvent3(){
				wx.showLoading({ title: '加载中', mask: false})
			},
			handleEvent4(){
				wx.hideLoading({
					// noConflict:true //目前 toast 和 loading 相关接口可以相互混用，此参数可用于取消混用特性
				})
			},
			handleEvent5(){
				wx.enableAlertBeforeUnload({message:'确定返回？'})
			},
			handleEvent6(){
				wx.disableAlertBeforeUnload()
			},
			handleEvent7(){
				wx.showModal({
				  title: '提示',
				  content: '这是一个模态弹窗',
				  editable: true,//显示内容是否为输入框
				  placeholderText: '请输入',
				  showCancel: true, //是否显示取消按钮
				  cancelText: '新取消', //取消按钮的文字，最多 4 个字符
				  cancelColor:'red',
				  confirmText: '新确定',
				  confirmColor: 'orange',
				  success ({cancel, confirm, content}) {
				    if (confirm) {
				      console.log('用户点击确定',content)
				    }
					else if (cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			},
			
			handleEvent8(){
				wx.showActionSheet({
					alertText:'啊手动阀',//警示文案（模拟器中不显示）
					itemList: ['A', 'B', 'C'], //按钮的文字数组，数组长度最大为 6
					itemColor: 'red',
					success (res) {
						console.log(res.tapIndex)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	h4{
		padding: 30rpx;
	}
	.list{
		padding: 0 30rpx;
		button{
			height: 70rpx;
			line-height: 70rpx;
			font-size: 35rpx;
			margin-bottom:20rpx;
		}
	}
	.page-head{
		width:750rpx;
		height: 100%;
		display: flex;
		align-items: center;
		.page-head-btn{
			display: inline-block;
			width:70rpx;
			height: 70rpx;
			background: url('../../static/img/menu.png') center/50rpx no-repeat;
			&:active{
				background-color: #eee;
			}
		}
	}
</style>
